<template>
	<view class="home">
		<u-row customStyle="margin-bottom: 20rpx">
			<u-col span="12">
				<u-swiper :list="list" :height="180"></u-swiper>
			</u-col>
		</u-row>
		<u-row customStyle="margin-bottom: 20rpx" gutter="10">
			<u-col span="6">
				<view class="home-box" @click="getInPage('/views/assessment')">
					<image src="/static/images/1.png" mode=""></image>
					健康评估
				</view>
			</u-col>
			<u-col span="6">
				<view class="home-box" @click="getInPage('/views/suggestion')">
					<image src="/static/images/4.png" mode=""></image>
					健康建议
				</view>
			</u-col>
		<!-- 	<u-col span="4">
				<view class="home-box" @click="getInPage('/views/archives')">
					<image src="/static/images/3.png" mode=""></image>
					健康档案
				</view>
			</u-col> -->
		</u-row>
		<view class="home-buttom" v-for="item in 10" :key="item">
			<image src="https://images2.alphacoders.com/139/thumbbig-1393870.webp" mode=""></image>
			<view class="content">
				<view>癌症防范</view>
				<text>我是内容我是内容我是内容我是内容我是内容我是内容我是内容</text>
			</view>
			<view class="arrow-box">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					"https://images2.alphacoders.com/139/thumbbig-1393870.webp",
					"https://images2.alphacoders.com/139/thumbbig-1393869.webp",
					"https://images5.alphacoders.com/139/thumbbig-1394296.webp",
				],
			};
		},
		methods:{
			getInPage(url){
				if(!url){
					uni.showToast({
						icon: 'none',
						title: '暂无地址'
					})
				}else{
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.home {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		overflow: auto;

		.home-box {
			width: 100%;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			box-shadow:  2rpx 2rpx 2rpx rgba(0, 0, 0, 0.1);
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}

		.home-buttom {
			width: 100%;
			padding: 20rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			image{
				width: 200rpx;
				height: 150rpx;
				border-radius: 10rpx;
				
			}
			.content{
				width: calc(100% - 200rpx - 50rpx);
				height: 150rpx;
				margin: 0 10rpx 0 10rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-around;
				view{
					font-weight: bold;
				}
				text{
					font-size: 26rpx;
				}
			}
			.arrow-box{
				width: 50rpx;
				height: 150rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>